<template>
	<view>
		<view class="">
			<image style="width: 100%;" src="/static/img/httpindex/login/login_bg.png" mode="widthFix"></image>
		</view>
		<form @submit="formSubmit">
			<view class="login_main">
				<view class="login_logo">
					<image style="width: 100%;height: 100%;border-radius: 50%;" src="@/static/logo.png" mode=""></image>
				</view>
				<view class="input_phone">
					<image style="width: 26rpx;margin-right: 66rpx;" src="/static/img/httpindex/register/shoujihao.png"
						mode="widthFix"></image>
					<input maxlength="11" type="number" placeholder="请输入手机号(只能是11位数字)" style="font-size:28rpx;"
						placeholder-style="font-size:28rpx;color:#CCCCCC" name="mobile" v-model="mobile">
				</view>
				<view class="input_phone" style="margin-top: 10rpx;">
					<image style="width: 26rpx;margin-right: 66rpx;" src="/static/img/httpindex/register/mima54.png"
						mode="widthFix"></image>
					<input type="safe-password" style="font-size:28rpx;"
						placeholder-style="font-size:28rpx;color:#CCCCCC" :password="showPassword" minlength="6"
						placeholder="请输入登录密码" name="password">
				</view>
				<view class="input_phone" style="margin-top: 10rpx;">
					<image style="width: 28rpx;margin-right: 66rpx;" src="/static/img/httpindex/register/zhifumima.png"
						mode="widthFix"></image>
					<input type="safe-password" placeholder="请设置支付密码" style="font-size:28rpx;"
						placeholder-style="font-size:28rpx;color:#CCCCCC " :password="showPassword" minlength="6"
						name="password2">
				</view>
				<view class="input_phone" style="margin-top: 10rpx;">
					<image style="width: 30rpx;margin-right: 66rpx;" src="/static/img/httpindex/register/yanzhengma.png"
						mode="widthFix"></image>
					<input type="text" placeholder="请输入验证码" name="code" style="font-size:28rpx;"
						placeholder-style="font-size:28rpx;color:#CCCCCC ">
					<view class="setcode" @tap="Code">
						{{btnstr}}
					</view>
					<!-- <view class="setcode" style="opacity: 0.5;">
							获取验证码
						</view> -->
				</view>
				<view class="input_phone" style="margin-top: 10rpx;">
					<image style="width: 30rpx;margin-right: 66rpx;" src="/static/img/httpindex/register/yaoqingma.png"
						mode="widthFix"></image>
					<span v-if="istuijian == 1">{{tuijiannumber}}</span>
					<input v-else type="text" placeholder="请填写邀请码(非必填)" style="font-size:28rpx;"
						placeholder-style="font-size:28rpx;color:#CCCCCC" name="tuijiannumber" v-model="tuijiannumber">
				</view>
				<view style="margin-top: 22rpx;">
					<label style="display: flex;align-items: center;">
						<checkbox-group @change="selectItem">
							<checkbox style="transform:scale(0.5)" :checked="checked" />
						</checkbox-group>
						<view style="font-size: 22rpx;">
							我已阅读并同意<text style="color: #2faaff;" @tap="goServiceContract()">《用户服务协议》</text>
						</view>
					</label>
				</view>
				<button class="btn_login" form-type="submit">
					注册
				</button>
				<view class="bottom_cls" @tap="goLogin">
					已有账号，去登陆
				</view>
			</view>
		</form>
		<slideCode :modelValue="modelValue"></slideCode>
	</view>
</template>

<script>
	import slideCode from '@/components/slide_code/xlg-slideCode.vue'
	import Region from '@/components/region/region.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			slideCode,
			Region
		},
		data() {
			return {
				modelValue: {
					show: false,
				},

				btnstr: '获取验证码',
				numShow: false,
				second: 60,
				checked: false,
				showPassword: true,
				eve: "/static/img/login/biyan.png",
				eve_avtion: "/static/img/login/zhengyan.png",
				backgroundColor: '#29ad97',
				tuijiannumber: '',
				mobile: '',
				defaultValue: [],
				area: '',
				istuijian: 0,
			}
		},
		onLoad(option) {

			if (option.tusernumber) {
				this.istuijian = 1;
				this.tuijiannumber = option.tusernumber;
			}

			uni.$on('register_code_success', () => {
				console.log('register')
				this.getCode();
			})
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),

		},
		methods: {
			...mapMutations(['login', 'logout']),
			Focus() {
				this.backgroundColor = "#29ad97"
			},
			Blur() {
				this.backgroundColor = "#29ad97"
			},
			selectItem() {
				this.checked = !this.checked

			},

			onChangeRegion(region) {
				let id = 0;
				let area_name = [];
				let area_id = '';
				if (region[2].id > 0) {
					id = region[2].id;
					area_id = region[0].id + ',' + region[1].id + ',' + region[2].id
					area_name = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area_id = region[0].id + ',' + region[1].id
					area_name = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area_name;
				this.area = area_id;
			},

			changePassword() {
				if (this.password.length > 0) {
					this.showPassword = !this.showPassword
				}
			},

			formSubmit: function(e) {
				var formdata = e.detail.value
				// console.log(formdata)
				// if (!(formdata.usernumber.length > 0)) {
				// 	uni.showToast({
				// 		title: '账号不能为空',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(formdata
						.mobile))) {
					this.$api.msg('手机号格式错误')
					return
				}
				if (!(formdata.code.length > 0)) {
					this.$api.msg('短信验证码不能为空')
					return
				}

				// console.log(this.tuijiannumber)
				formdata.tuijiannumber = this.tuijiannumber
				if (formdata.password.length < 6) {
					this.$api.msg('登录密码不能为空')
					return
				}

				if (formdata.password2.length < 6) {
					this.$api.msg('支付密码不能为空')
					return
				}

				if (!this.checked) {
					this.$api.msg('请勾选用户服务协议')
					return
				}

				// console.log(formdata)
				this.goRegist(formdata)
			},

			async goRegist(dataObj) {
				let reg = await this.$myRequest({
					url: '/register',
					methods: 'POST',
					data: dataObj,
				})

				let rdata = reg.data
				// console.log(rdata)
				this.$api.msg(rdata.msg);
				setTimeout(() => {
					let token = rdata.data.token;

					uni.setStorageSync('token', token)
					// #ifdef H5
					// console.log('ceshi')
					window.location.href = "http://ldlwq.hnliandesy.com/index/index/loading"
					// #endif
					// #ifdef APP-PLUS
					this.Login(token)
					// #endif

				}, 1500)
				// console.log(reg)
			},

			async Login(token) {
				let UIfo = await this.$myRequest({
					url: '/getUserInfo',
					methods: 'POST',
					data: {
						token: token
					}
				})
				if (UIfo.data.status == 1) {
					let userInfo = UIfo.data.data

					this.login(userInfo)
					uni.showToast({
						title: '登陆成功',
						icon: "none"
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},

			Code() {
				if (!(this.mobile.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.mobile))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				
				uni.setStorageSync('code_type', 'register')
				this.modelValue.show = true;

			},

			async getCode() {
				let res = await this.$myRequest({
					url: '/getCode',
					data: {
						mobile: this.mobile
					}
				})

				this.$api.msg(res.data.msg);

				this.btnstr = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.btnstr = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.btnstr = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			async goServiceContract() {
				uni.navigateTo({
					url: '/pages/docs/service-contract'
				})
			},

			async goPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/docs/privacy-policy'
				})
			},

			// 去登录
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
	}
</script>

<style>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.login_main {
		height: 1000rpx;
		background: #fff;
		border-radius: 10rpx;
		position: absolute;
		margin: 0 30rpx;
		top: 390rpx;
		padding: 0 47rpx;
	}

	.login_logo {
		border: 1px solid #1CBCB8;
		border-radius: 50%;
		color: #14AFAB;
		font-size: 40rpx;
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		position: relative;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
	}

	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;
		font-size: 30rpx;
	}

	.btn_login {
		margin-top: 72rpx;
		background: #1B1B1B;
		border-radius: 70px;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		padding: 6rpx 0;
	}

	.bottom_cls {
		font-size: 24rpx;
		/* color: #14B6B2; */
		display: flex;
		margin-top: 40rpx;
		justify-content: center;
	}

	.setcode {
		width: 65px;
		color: #FF0000;
		font-size: 26rpx;
		white-space: nowrap;
		text-align: center;
	}


	.radio {
		margin-left: 45rpx;
		margin-top: 10rpx;
	}

	.fs24 {
		font-size: 25rpx;
		margin-top: 15rpx;
	}

	.btn {
		color: white;
		background-color: #29ad97;
		border-radius: 10rpx;
		margin: 30rpx 40rpx 20rpx 40rpx;
	}

	.text {
		color: white;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		background-color: #29ad97;
		border-radius: 10rpx;
		align-self: center;
		padding: 0 24upx;
	}

	.header {
		margin-top: 30rpx;
	}

	.shouji {
		background-color: #f4f4f4;
		font-size: 30upx;
		margin: 0 45rpx 30rpx 45rpx;
		height: 40rpx;
		padding: 30rpx;
		border-radius: 80rpx;
		align-items: center;
	}

	.uni-input {
		padding-left: 15rpx;
		padding-top: -10rpx;
		letter-spacing: 2rpx;
		width: 50%;
		flex: 1;
	}

	.pawicon {
		width: 30rpx;
		height: 20rpx;
		margin-left: 250rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}
</style>